<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
    <script>
        let imgs = [
            "../img/man00.jpg",
            "../img/man01.jpg",
            "../img/man02.jpg",
            "../img/man03.jpg",
            "../img/man04.jpg",
            "../img/man05.jpg",
            "../img/man06.jpg"
        ]

        let randomImg;
        let img;
        var startId;

        function imgStart() {

            startId = setInterval(() => {
                $("#startID").prop("disabled",true);
                $("#stopID").prop("disabled",false)
                randomImg = Math.round(Math.random() * 6);
                img = imgs[randomImg];
                $("#img1ID").prop("src", img);




            }, 20)
        }

        function imgStop() {
            $("#startID").prop("disabled",false);
            $("#stopID").prop("disabled",true)
            clearInterval(startId);
            $("#img2ID").prop("src", img).hide();
            $("#img2ID").show("slow")


        }
    </script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="" width="800px" height="500px" alt="点击开始"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">


</body>
</html>